<template>
  <div class="add box">
    <div>
      <p>
        <i class="icon-bitian iconfont"></i>存储配置名称
        <el-input v-model="storageName" placeholder="请输入存储配置名称" size="normal" maxlength="30"></el-input>
      </p>
      <p>
        &#12288;&#12288;<i class="icon-bitian iconfont"></i>存储节点
        <el-select v-model="region" placeholder="请选择终端节点" size="normal"> 
          <el-option
              v-for="(item,key) in regionList"
              :key="key"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </p>
      <p>
        &#12288;&#12288;&#12288;&#12288;<i class="icon-bitian iconfont"></i>桶名
        <el-input v-model="bucketName" placeholder="请输入桶名" size="normal" maxlength="30"></el-input>
      </p>
      <p>
        &#12288;&#12288;<i class="icon-bitian iconfont"></i>存储方式
        <span class="fixWidth" >
           <el-radio v-model="type" v-for="(item,index) in typeList" :key="index" :label="item.label" :disabled="!item.supported">{{item.label}}</el-radio>
        </span>
      </p>
      <p>
        <el-button type="primary" round size="normal" @click="addStorage">确认</el-button>
        <el-button round size="normal" @click="()=>{$router.push('/configManage/storageConfig')}">取消</el-button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "storageAdd",
  components:{},
  data(){
    return{
      regionList:[],
      typeList:[],
      storageName:'',
      region:'',
      bucketName:'',
      type:''
    }
  },
  created() {
    this.getRegionList();
    this.getTypeList();
  },
  methods: {
    verify(){
      const reg = /^[a-z]+$/;//小写正则
      if(this.storageName ===""){
        this.$message.error("请填写存储配置名称");
        return false;
      }
      else if(this.region ===""){
        this.$message.error("请选择存储节点");
        return false;
      }
      else if(this.bucketName ===""){
        this.$message.error("请填写桶名");
        return false;
      }
      else if(!reg.test(this.bucketName)){
        this.$message.error("请填写正确格式的桶名,只能是小写英文字母");
        return false;
      }
      else if(this.bucketName.length>50){
        this.$message.error("请填写正确格式的桶名，不能超过50个字符");
        return false;
      }
      else if(this.type ===""){
        this.$message.error("请选择存储方式");
        return false;
      }
      else if(this.type ===""&&this.region ===""&&this.bucketName ===""&&this.type ===""){
        this.$message.error("请填写所有信息");
        return false;
      }
      else{
        return true;
      }
    },
    getRegionList() {
      this.$Http.regionList().then(res => {
        this.regionList = res.data;
      })
    },
    getTypeList(){
      this.$Http.typeList().then(res => {
        this.typeList = res.data;
      })
    },
    addStorage() {
      console.log("增加");
      if(this.verify()){
        console.log("我要发请求了");
        this.$Http.storageAdd({
          storageName:this.storageName,
          region:this.region,
          bucketName:this.bucketName,
          type:this.type
        }).then(res => {
          if(res.code === "SUCCESS"){
            console.log("请求成功了");
            this.$message.success("添加成功");
            this.$router.push('/configManage/storageConfig');
          }
          else{
            this.$message.error(res.message);
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/assets/css/content.scss";

.el-radio{
  margin-right: 15px!important;
  /deep/ .el-radio__label{
    padding-left:4px!important;
  }
}
</style>
